<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
    
</head>
<body>
    <!-- 
        1.获取echarts，如：npm install echarts 等方式
        2.引入echarts
        3.定义图形的展示容器
            理论上可以使用任何标签作为容器，但是建议一定要提供宽高样式
            echarts会自行构建所需要的canvas或者svg标签，并添加到容器中
            echarts在创建图形绘制容器时候，会从容器元素上加载宽度和高度
        4.完成echarts的初始化操作
            图形和页面DOM元素的关联、主题设置、echarts的初始化必须在页面完成后执行

        5.通过escharts.init初始化方法返回图形的初始化对象，完成配置选项设置，实现图形选择等操作，options是对象参数，通过对象中定义的对象的属性完成功能的调用
        
    -->

    <div id="main" style="width: 100%;height:300px;border:1px solid #ccc;"></div>
    <input type="button" value="重置" onclick="resetEcharts()">
    <script type="text/javascript">

        // echarts.init(dom[,theme[,opts]]);
        // 基于准备好的dom，初始化echarts实例
        var chartDom=document.getElementById("main");
        var myChart=echarts.init(chartDom);
  
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        };
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        function resetEcharts(){
            myChart.resize();//resize方法被调用的时候，会根据当前图表父容器进行宽高计算，并重新渲染页面
        }

        //监听浏览器窗口大小变化
        window.onresize=function(){
            myChart.resize();
        };
      </script>
</body>
</html>